<template>

    <div class="home-body">
        <el-row :gutter="15" type="flex" justify="center">
            <el-col :span="6">
                <el-card class="box-card-notice">
                    <el-row>公告</el-row>
                    <el-row v-for="b in homeData.bulletins">
                        <span class="shenlue" style="color: red" v-if="b.top">{{ b.title }}</span>
                        <span class="shenlue" v-if="!b.top">{{ b.title }}</span>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="12">
                <!-- 这里是弹幕 -->
                <Barrage/>
            </el-col>
            <el-col :span="6">
                <el-card class="box-middle-nav">
                    <el-row>1</el-row>
                    <el-row>2</el-row>
                    <el-row>3</el-row>
                    <el-row>4</el-row>
                    <el-row>5</el-row>
                    <el-row>1</el-row>
                    <el-row>2</el-row>
                    <el-row>3</el-row>
                    <el-row>4</el-row>
                    <el-row>5</el-row>
                    <el-row>1</el-row>
                    <el-row>2</el-row>
                    <el-row>3</el-row>
                    <el-row>4</el-row>
                    <el-row>5</el-row>
                    <el-row>1</el-row>
                    <el-row>2</el-row>
                    <el-row>3</el-row>
                    <el-row>4</el-row>
                    <el-row>5</el-row>
                    <el-row>1</el-row>
                    <el-row>2</el-row>
                    <el-row>3</el-row>
                    <el-row>4</el-row>
                    <el-row>5</el-row>
                </el-card>
            </el-col>
        </el-row>
           <div class="articleListContainer" v-for="a in homeData.articleSynopsisInfo.articleSynopsis">
            <el-row :gutter="15" type="flex" justify="center">
                <el-col :span="6"></el-col>
                <el-col :span="12" @click="toArticleDetails(a.articleVO.id)">
                    <el-card class="article">
                        <el-row class="move">
                            <el-col :span="4" class="headSculptureFather">
                                <el-avatar :size="70" :src="a.user.avatarResourcePath" style="margin-top: auto;margin-bottom: auto" />
                            </el-col>
                            <el-col :span="20">
                                <el-row class="articleTitle">{{a.articleVO.title}}</el-row>
                                <el-row class="articleIntroduction">{{a.articleVO.articleAbstract}}</el-row>
                                <el-row class="articleStatistics">
                                    <div class="articleInfo">
                                        {{ a.articleVO.viewNumber+"观看" }}
                                    </div>
                                    <div class="articleInfo">
                                        {{ a.articleVO.likeNumber+"点赞" }}
                                    </div>
                                    <div class="articleInfo">
                                        {{ a.articleVO.collectNumber+"收藏" }}
                                    </div>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import {nextTick, ref, reactive, onMounted} from "vue";
import RequestUtil from "@/utils/RequestUtil";
import InfoUtil from "@/utils/InfoUtil";
import Barrage from "@/components/common/BulletScreen.vue";
import { useRouter } from "vue-router";
export default {
    setup() {

        const router = useRouter();

        onMounted(() => {
            queryHomeData();
        });

        const homeData = reactive({
            articleSynopsisInfo: {
                currentPageNumber: 1,
                pageSize: 10,
                lineCount: 3,
                articleSynopsis: []
            },
            bulletins: []
        })

        const queryHomeData = () => {
            RequestUtil.sendGetRequest("/home/queryHomeData").then(
                (res) => {
                    if (res.code !== 200) {
                        InfoUtil.warning(res.message);
                    }
                    const articleSynopsis = res.data.articleSynopsis;
                    homeData.articleSynopsisInfo.currentPageNumber = articleSynopsis.currentPageNumber;
                    homeData.articleSynopsisInfo.articleSynopsis = articleSynopsis.data;
                    homeData.articleSynopsisInfo.pageSize = articleSynopsis.pageSize;
                    homeData.articleSynopsisInfo.lineCount = articleSynopsis.lineCount;
                    homeData.bulletins = res.data.bulletins
                    handleUserAvatarPath();
                }
            )
        }

        //到文章详情页
        const toArticleDetails=(articleId)=>{
            const url = router.resolve({path: `/article-details/${articleId}`}).href
            window.open(url, '_blank')


            // router.push(`/article-details/${articleId}`)
        }

        //处理头像路径
        const handleUserAvatarPath=()=>{
            let data=homeData.articleSynopsisInfo.articleSynopsis;
            for(let i=0;i<data.length;i++){
                 let avatarName=data[i].user.avatarResourceName;
                 RequestUtil.sendGetRequestGetImage("/file/user/avatar",{fileName:avatarName}).then(
                     (res)=>{
                         data[i].user.avatarResourcePath=res;
                     },
                     (err)=>{
                        InfoUtil.error("发送请求失败");
                     }
                 )

            }
        }


        //查询首页文章简要
        const queryHomeArticleSynopsis = (pageNumber, pageSize, orderRule) => {

            const requestData = {
                "pageNumber": pageNumber,
                "pageSize": pageSize,
                "orderRule": orderRule
            }
            debugger
            RequestUtil.sendGetRequest("/article/queryHomeArticleSynopsis", requestData).then(
                (res) => {
                    if (res.code !== 200) {
                        InfoUtil.warning(res.message);
                    }
                    homeData.articleSynopsisInfo.currentPageNumber = res.currentPageNumber;
                    homeData.articleSynopsisInfo.articleSynopsis = res.data;
                    homeData.articleSynopsisInfo.pageSize = res.pageSize;
                    homeData.articleSynopsisInfo.lineCount = res.lineCount;
                    handleUserAvatarPath();
                },
                (err) => {
                    InfoUtil.error("发送请求失败")
                }
            )
        }

        return {
            homeData,toArticleDetails
        }
    },
    components: {
        Barrage,
    },
};
</script>
<style lang="scss" scoped>
.home-body {
    //position: relative;
    top: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 30px;

    .el-row {
        width: 100%;
    }
    .articleListContainer {
        width: 100%;
        margin-top: 10px;

        .article {
            width: 100%;

            .move {
                position: relative;
                left: -1vw;

                .headSculptureFather {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .headSculpture {
                        width: 8vh;
                        height: 8vh;
                        //border-radius: 5.5vh;
                        //background-image: url("../../assets/img/home/giao.webp");
                        //background-size: 100% 100%;
                    }
                }

                .articleTitle {
                    width: 100%;
                    font-size: 1rem;
                    font-weight: 600;
                }

                .articleIntroduction {
                    width: 100%;
                    overflow: hidden; //溢出内容隐藏
                    text-overflow: ellipsis; //文本溢出部分用省略号表示
                    display: -webkit-box; //特别显示模式
                    -webkit-line-clamp: 3; //行数
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .articleStatistics {
                    width: 100%;
                    margin-top: 5px;

                    .articleInfo{
                        color: #797979;margin-left: 5px;
                    }
                }
            }
        }
    }

    .input-with-select .el-input-group__prepend {
        background-color: var(--el-fill-color-blank);
    }

    .box-card-notice {
        width: 100%;
        height: 30vh;

        .el-row {
            margin-top: 1vh;
        }

        .shenlue {
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .box-middle-nav {
        width: 22vw;
        height: auto;
        position: absolute;
        top: 0px;
    }
}
</style>
